<template>
  <div class="about">
    <div class="head">
      <p>
        <i class="fa fa-info-circle" aria-hidden="true"></i> About</p>
    </div>
    <div class="info">
      <p class="title">关于</p>
      <hr>
      <el-row>
        <el-col :span="14">
          <div class="row">
            <i class="fa fa-gamepad fa-fw" aria-hidden="true"></i>
            <div style="display:inline-block;">
              <p class="name">名称</p>
              <p>星云跑者</p>
            </div>
          </div>
          <div class="row">
            <i class="fa fa-envelope-open fa-fw" aria-hidden="true"></i>
            <div style="display:inline-block;">
              <p class="name">描述</p>
              <p>奔跑赚取R币</p>
            </div>
          </div>
          <div class="row">
            <i class="fa fa-th-large fa-fw" aria-hidden="true"></i>
            <div style="display:inline-block;">
              <p class="name">版本</p>
              <p>1.0.0</p>
            </div>
          </div>
          <div class="row">
            <i class="fa fa-user fa-fw" aria-hidden="true"></i>
            <div style="display:inline-block;">
              <p class="name">作者</p>
              <p>星云跑者</p>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="pic">
            <img src="../assets/01.png">
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="info">
      <p class="title">联系我们</p>
      <hr>
      <div class="code">
        <div>
          <img src="../assets/about_02.png">
          <p>微信</p>
        </div>
        <div>
          <img src="../assets/about_03.png">
          <p>微博</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.info {
  max-width: 1200px;
  margin: 60px auto 0;
  text-align: start;
  .title {
    font-size: 20px;
    padding-left: 20px;
  }
  .row {
    i {
      font-size: 24px;
      padding: 0 20px;
    }
    height: 60px;
    display: flex;
    align-items: center;
    padding: 10px 30px;
    .name {
      font-size: 14px;
      color: #72635d;
    }
  }
  .pic {
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 50%;
    }
  }
  .code {
    display: flex;
    padding: 20px;
    justify-content: space-around;
    text-align: center;
    img {
      width: 220px;
    }
  }
}
</style>
